<template>
	<view class="content">
		<TabNavigation style="width: 100%;" :title="title"></TabNavigation>
		<card-box style="width: 100%;" :header="'市代表在代表团人数分布情况'">
			<view slot="main" class="content-card-main">
				<view class="main_card main_card_b">
					<view class="card" v-for="(item,index) in card4ImgList" :key="index">
						<image :src="item.url"></image>
						<view class="title" style="left:40rpx;color: #363636;">
							{{item.title}}
						</view>
						<view class="bottom" :style="`left:40rpx;color: ${item.unitColor};`">
							<text :style="`color: ${item.color};`">
								{{item.number}}
							</text>
							{{item.unit}}
						</view>
					</view>
				</view>
			</view>
		</card-box>

		<card-box style="width: 100%;margin-bottom: 30rpx;" :header="'市代表综合情况'">
			<view slot="main" class="content-card-main content-card-main_b">

				<view class="border_item" v-for="(item,index) in borderList" :key="index">
					<view class="name">
						{{item.name}}
					</view>
					<view class="content" v-for="(ele,ex) in item.list" :key='ex'>

						<view class="right">
							<view class="title">
								{{ele.label}}
							</view>
							<view class="status" v-if="ele.status" :class="`son1${ele.status}`">
								<view class='icon'><uni-icons color="#ffffff" type="redo-filled" size="16"></uni-icons>
								</view>

								{{ele.content}}
							</view>
							<view class="son" v-else :class="{son1:ele.style}">
								{{ele.content}}
							</view>

						</view>
					</view>
				</view>

			</view>
		</card-box>


		<card-box style="width: 100%;margin-bottom: 30rpx;" :header="'市代表年龄分布情况总览'">
			<view slot="main" class="content-card-main ">

				<chart1 />


			</view>
		</card-box>

		<card-box style="width: 100%;margin-bottom: 30rpx;" :header="'市代表学历分布情况总览'">
			<view slot="main" class="content-card-main">


				<chart2 />

			</view>
		</card-box>


		<card-box style="width: 100%;margin-bottom: 30rpx;" :header="'市代表基本构成'">
			<view slot="main" class="content-card-main">

				<pieChart />

			</view>
		</card-box>

		<card-box style="width: 100%;margin-bottom: 30rpx;" :header="'市代表政治面貌构成'">
			<view slot="main" class="content-card-main">
				<chart4 />
				<view class="header">
					<view class="title">
						<image src="/static/name_icon.png" mode=""></image>
						<text>民族党派统计详情</text>
					</view>
				</view>
				<customBar :data="barList" :barStyle="barStyle"></customBar>
				<view class="table_footer">
					展开 <text class="triangle"></text>
				</view>
			</view>
		</card-box>

	</view>



</template>

<script>
	import TabNavigation from '@/components/TabNavigation.vue'
	import cardbox from '@/components/card/cardbox.vue'
	import cTable from '@/components/cTable/cTable.vue'
	import wordCloud from '@/components/wordCloud.vue'
	import customBar from '@/components/customBar.vue'
	import pieChart from './charts/pie-chart.vue'
	import chart1 from './charts/chart1.vue'
	import chart2 from './charts/chart2.vue'
	import chart4 from './charts/chart4.vue'

	export default {
		components: {
			TabNavigation,
			wordCloud,
			customBar,
			pieChart,
			chart1,
			chart2,
			chart4,
			"card-box": cardbox,
			"c-table": cTable
		},
		data() {
			return {
				single: '',
				endSingle: '',
				header: "统计信息",
				title: '人大代表随手拍工作视窗',

				barStyle: {
					color: '#F22C1F',
					background: 'linear-gradient(311deg, #FF1010 0%, #FFD3D3 100%);'

				},
				barList: [{

					name: '天河区',
					value: 66,
				}, {

					name: '黄埔区',
					value: 56,
				}, {

					name: '海珠区',
					value: 47,
				}],
				borderList: [{
						name: '连任代表',
						list: [{
								label: '人数：',
								content: '306  人',
								style: true
							},
							{
								label: '占比：',
								content: '15.3%',
								status: 'up'
							},
						]
					}, {
						name: '归侨侨眷',
						list: [{
								label: '人数：',
								content: '306  人',
								style: true
							},
							{
								label: '占比：',
								content: '15.3%',
								status: 'up'
							},
						]
					}, {
						name: '妇女',
						list: [{
								label: '人数：',
								content: '306  人',
								style: true,
							},
							{
								label: '占比：',
								content: '15.3%',
								status: 'up'
							},
						]
					},
					{
						name: '少数民族',
						list: [{
								label: '人数：',
								content: '306  人',
								style: true
							},
							{
								label: '占比：',
								content: '15.3%',
								status: 'down'
							},
						]
					}
				],
				card4ImgList: [{
						url: '/static/ct35r2r.png',
						title: '五级代表总数',
						number: 7473,
						unit: '人',
						color: '#B74B13',
						unitColor: "#DA8254"
					},
					{
						url: '/static/ct35r1r.png',
						title: '全国人大代表数',
						number: 16,
						unit: '人',
						color: '#21B626',
						unitColor: "#21B626"
					},
					{
						url: '/static/ct35r3r.png',
						title: '省人大代表数	',
						number: 12,
						unit: '人',
						color: '#A57504',
						unitColor: "#A57504"
					},

					{
						url: '/static/ct35r4r.png',
						title: '市人大代表数',
						number: 12,
						unit: '人',
						color: '#F17666',
						unitColor: " #F17666"
					},


					{
						url: '/static/ct35r5r.png',
						title: '区人大代表数',
						number: 12,
						unit: '人',
						color: '#B713A9',
						unitColor: "#B713A9"
					},
					{
						url: '/static/ct35r6r.png',
						title: '镇人大代表数',
						number: 12,
						unit: '人',
						color: ' #49B0F4',
						unitColor: " #49B0F4"
					}
				]
			}
		},
		onLoad() {

		},
		methods: {
			maskClick(e) {
				console.log('maskClick事件:', e);
			}
		}
	}
</script>

<style scoped lang="scss">
	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.title {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #000000;
			line-height: 33rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
			display: flex;
			align-items: center;

			image {
				width: 90rpx;
				height: 84rpx;
				margin-left: -9rpx;
			}

			text {
				margin-top: 4rpx;
			}
		}


		.header-right {
			position: relative;
			width: 234rpx;
			height: 52rpx;

			.img {
				width: 234rpx;
				height: 52rpx;
			}

			text {
				font-family: DIN, DIN;
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
				position: absolute;
				top: 50%;
				right: 20rpx;
				transform: translateY(-50%);
			}
		}

		.header-right1 {
			position: relative;
			width: 104rpx;
			height: 52rpx;

			.img {
				width: 104rpx;
				height: 52rpx;
			}

			text {
				font-family: DIN, DIN;
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
				position: absolute;
				top: 50%;
				right: 20rpx;
				transform: translateY(-50%);
			}

		}

	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		// background: #F6F6F6;
	}




	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.content-card-main {
		padding: 26rpx 32rpx 32rpx 28rpx;

		.line {
			width: 100%;
			height: 12rpx;
			border-radius: 6rpx;
			background-color: #F5F7F9;
			margin: 46rpx 0 34rpx;
		}


		.border_item {
			margin-top: 34rpx;
			position: relative;
			background: #FFFFFF;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			border: 2rpx solid #EDEDED;
			padding: 30rpx 22rpx 24rpx;
			width: 49%;
			// display: inline-block;

			flex: 0 0 auto;

			.name {
				position: absolute;
				padding: 8rpx 20rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 600;
				font-size: 24rpx;
				color: #FFFFFF;
				top: -26rpx;
				left: 20rpx;
				background: linear-gradient(135deg, #DF2F2F 0%, #FF8180 100%), linear-gradient(135deg, #FF0000 0%, #C70100 100%);
				border-radius: 4rpx 4rpx 4rpx 4rpx;
			}

			.content {
				display: flex;
				flex-direction: row;
				justify-content: start;
				position: relative;
				width: 100%;
				display: inline-block;

				.right {
					margin-top: 20rpx;
					margin-left: 8rpx;
					display: flex;
					flex-direction: row;
					justify-content: space-between;

					.title {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #152C07;
						line-height: 28rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
					}

					.son {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #000000;
						line-height: 28rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
					}

					.son1 {
						font-family: DIN-BoldItalic, DIN-BoldItalic;
						font-weight: 400;
						font-size: 28rpx;
						color: #DF2F2F;
						line-height: 33rpx;
						text-align: center;
						font-style: normal;
						text-transform: none;
					}

					.status {
						width: 114rpx;
						height: 46rpx;
						background: rgba(0, 203, 106, 0.8);
						border-radius: 4rpx 4rpx 4rpx 4rpx;
						font-family: DIN-BlackItalic, DIN-BlackItalic;
						font-weight: 400;
						font-size: 24rpx;
						color: #FFFFFF;
						line-height: 46rpx;
						text-align: center;
						font-style: normal;
						text-transform: none;

					}

					.son1up {
						color: #FFFFFF;
						background: rgba(0, 203, 106, 0.8);

						.icon {
							display: inline-block;
							width: 16rpx;
							height: 16rpx;
							transform: rotateX(0deg) rotateY(-180deg) rotateZ(270deg);
							/* 或者 scaleY(-1); */
							color: #FFFFFF;
							position: relative;
							/* 或者 absolute，具体取决于你的布局需求 */
							top: 24rpx;
							/* 根据需要调整 */
							left: 16rpx;
							/* 根据需要调整 */
						}
					}

					.son1down {
						color: #FFFFFF;
						background: #DF2F2F;

						.icon {
							display: inline-block;
							width: 16rpx;
							height: 16rpx;
							transform: rotateX(0deg) rotateY(-180deg) rotateZ(90deg);
							/* 或者 scaleY(-1); */
							color: #FFFFFF;
							position: relative;
							/* 或者 absolute，具体取决于你的布局需求 */
							top: 8rpx;
							/* 根据需要调整 */
							left: -12rpx;
							/* 根据需要调整 */
						}
					}
				}

			}

		}
	}

	.content-card-main_b {
		padding-top: 0;
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		justify-content: space-between;
	}

	.content-card-main .main_card {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.content-card-main .main_card_b {
		display: flex;
		flex-wrap: wrap;
	}

	.content-card-main .main_card .card {
		position: relative;
	}


	.content-card-main .main_card_b .card {
		flex: 0 0 auto;
		/* 或者根据需要设置具体的宽度 */
		position: relative;
	}

	.content-card-main .main_card .card .title {
		position: absolute;
		top: 26rpx;
		left: 28rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #7F7F7F;
		line-height: 28rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.content-card-main .main_card .card .bottom {
		position: absolute;
		top: 72rpx;
		left: 28rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #7F7F7F;
		line-height: 28rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.content-card-main .main_card .card .bottom text {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 40rpx;
		color: #000000;
		line-height: 47rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.content-card-main .main_card .card image {
		width: 204rpx;
		height: 148rpx;
	}

	.content-card-main .main_card_b .card image {
		width: 308rpx;
		height: 160rpx;
	}

	.font {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		font-style: normal;
		text-transform: none;
	}

	.unitName {
		width: 362rpx;
		color: #000000;
		overflow: hidden;
		text-overflow: ellipsis;
		/* 超出部分显示为省略号 */
		white-space: nowrap;
		/* 保持内容在一行显示，如果需要多行，可以移除这行 */
	}


	.table_footer {
		margin-top: 26rpx;
		text-align: center;
		width: 100%;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #2A8BFD;
		line-height: 28rpx;
		font-style: normal;
		text-transform: none;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.triangle {
		margin-left: 6rpx;
		width: 0;
		height: 0;
		border-left: 9rpx solid transparent;
		/* 左侧透明 */
		border-right: 9rpx solid transparent;
		/* 右侧透明 */
		border-top: 12rpx solid #2A8BFD;
		/* 上侧为实心颜色 */
	}
</style>